/**
 * Created by tanbingqin on 2020/7/7.
 */
import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Input, Tabs, Spin, Row, Col, Icon, message, Select, Popover, Card } from 'antd'
import 'styles/request/travel-request/comp/consumer.scss'
import travelService from 'containers/request/travel-request/travel.service'

class TravelConsumer extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      supplies: [],
    }
  }

  componentDidMount() {
    const { suppliers, widgetMessageKey } = this.props;
    this.initSuppliers(suppliers, widgetMessageKey);
  };

  componentWillReceiveProps(nextProps) {
    this.initSuppliers(nextProps.suppliers, nextProps.widgetMessageKey);
  };

  initSuppliers = (suppliers, widgetMessageKey) => {
    let supplierType = '';
    if (widgetMessageKey === 'suite_flight') {
      supplierType = '2001';
    }
    if (widgetMessageKey === 'suite_train') {
      supplierType = '2002';
    }
    if (widgetMessageKey === 'suite_hotel') {
      supplierType = '2003';
    }
    this.setState({supplies: suppliers[supplierType] || []});
  };

  selectSupply = (supplierOID, supplier) => {
    const { onChange, disabled } = this.props;
    if (disabled) {
      return;
    }
    if (onChange) {
      onChange(supplierOID, supplier);
    }
  };

  render() {
    const { supplies } = this.state;
    const { value, disabled } = this.props;
    return (
      <div className="travel-consumer">
        <Row className="supplyRow" style={{marginBottom: 0}} type="flex">
          {
            supplies.map((sup, index)=> {
              return (
                <Col key={sup.supplyId} span={4} className="supply" onClick={() => this.selectSupply(sup.supplierOID, sup)}>
                  <Card
                    hoverable
                    className={value == sup.supplierOID ? 'card-on' : (disabled ? 'card-off-disable' : 'card-off')}
                    cover={sup.vendorIcon ? <img src={sup.vendorIcon.path}/> : null}
                  >
                    <Popover content={sup.name}>
                      <span className="card-name">{sup.name}</span>
                    </Popover>
                  </Card>
                </Col>
              )
            })
          }
        </Row>
      </div>
    )
  }
}

TravelConsumer.propTypes = {
  suppliers: React.PropTypes.any,
  widgetMessageKey: React.PropTypes.string,
  disabled: React.PropTypes.bool
};

TravelConsumer.defaultProps={
  suppliers: {},
  widgetMessageKey: '',
  disabled: false
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(TravelConsumer);
